import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },
      { id: "02", title: "消息2" },
      { id: "03", title: "消息3" },
    ],
  };

  replaceShow = (id,title) =>{
    //replace跳转+params传参
    // this.props.history.replace(`/home/message/detail/${id}/${title}`)

    //replace跳转+search传参
    //this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

    //replace跳转+state传参
    this.props.history.replace(`/home/message/detail`,{id,title})
  }

  pushShow = (id,title) =>{
    //push+params传参
    // this.props.history.push(`/home/message/detail/${id}/${title}`)

    //push跳转+search传参
    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

    //replace跳转+state传参
    this.props.history.push(`/home/message/detail`,{id,title})
  }

  back = () =>{
    this.props.history.goBack()
  }

  forward = () =>{
    this.props.history.goForward()
  }

  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((obj) => {
            return (
              <li key={obj.id}>
                {/* params传参 */}
                {/* <Link to={`/home/message/detail/${obj.id}/${obj.title}`}>{obj.title}</Link>&nbsp;&nbsp; */}

                {/* search传参 */}
                {/* <Link to={`/home/message/detail/?id=${obj.id}&title=${obj.title}`}>{obj.title}</Link> */}

                {/* state传参 */}
                <Link to={{pathname:'/home/message/detail',state:{id:obj.id,title:obj.title}}}>{obj.title}</Link>


                &nbsp;<button onClick={()=>this.pushShow(obj.id,obj.title)}>push查看</button>
                &nbsp;<button onClick={()=>this.replaceShow(obj.id,obj.title)}>replace查看</button>
              </li>
            );
          })}
        </ul>
        <hr />
        {/* params接参 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}

        {/* search/state接参 */}
        <Route path="/home/message/detail" component={Detail} />


        <hr />
        <button onClick={this.back}>回退</button>
        &nbsp;
        <button onClick={this.forward}>前进</button>
      </div>
    );
  }
}
